<template>
    <div class="content">
        <!-- 轮播图 -->
        <swiper :options="swiperOptions" class="swiper">
            <swiper-slide v-for="b in banner" :key="b.imageUrl">
                <img :src="b.imageUrl" class="banner-item" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <!-- 编辑推荐歌单 -->
        <title-border>编辑推荐歌单</title-border>
        <div v-if="recommendlist.length > 0">
            <ul class="recommend">
                <router-link
                    tag="li"
                    :to="`/songlist/${item.id}`"
                    v-for="item in recommendlist"
                    :key="item.id"
                >
                    <img-item :item="item" :playnum="true"></img-item>
                    <p class="hang">{{ item.name }}</p>
                </router-link>
            </ul>
        </div>
        <load-animate v-else></load-animate>
        <!-- 最新音乐 -->
        <title-border>最新音乐</title-border>
        <music-list
            v-if="musiclist.length > 0"
            :musiclist="musiclist"
            @play="$emit('play', $event)"
            @isfull="isfull = $event"
        ></music-list>
        <load-animate v-else></load-animate>
        <!-- 热门歌手 -->
        <title-border>热门歌手</title-border>
        <div v-if="singlist.length > 0">
            <ul class="songer">
                <router-link
                    tag="li"
                    :to="`/Singer/${sing.id}`"
                    v-for="sing in singlist"
                    :key="sing.id"
                >
                    <img-item :item="sing" :playnum="false"></img-item>
                    <p class="singername">{{ sing.name }}</p>
                </router-link>
            </ul>
        </div>
        <load-animate v-else></load-animate>
        <!-- 热门MV -->
        <title-border>热门MV</title-border>
        <div v-if="hotmvlist.length > 0">
            <ul class="hotmv">
                <router-link tag="li" :to="`/mv/${mv.id}`" v-for="mv in hotmvlist" :key="mv.id">
                    <img-item :item="mv" :playnum="true"></img-item>
                    <p class="singername">{{ mv.name }}</p>
                </router-link>
            </ul>
        </div>
        <load-animate v-else></load-animate>
    </div>
</template>

<script>
import ImgItem from "../components/ImgItem.vue";
import MusicList from "../components/MusicList.vue";
import TitleBorder from "../components/TitleBorder.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
    data() {
        return {
            recommendlist: [],
            musiclist: [],
            singlist: [],
            hotmvlist: [],
            isplay: true,
            banner: [],
            swiperOptions: {
                //swiper轮播图配置
                effect: "cube",
                grabCursor: true,
                cubeEffect: {
                    shadow: true,
                    slideShadows: true,
                    shadowOffset: 20,
                    shadowScale: 0.94,
                },
                speed: 2500,
                loop: true,
                autoplay: {
                    delay: 2500,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            },
        };
    },
    created() {
        this.getrecommendlist();
        this.getMusicList();
        this.getsingerlist();
        this.gethotmvlist();
        this.getBanners();
    },
    methods: {
        async getrecommendlist() {
            await this.axios.get("/personalized").then((res) => {
                this.recommendlist = res.result.splice(0, 9);
            });
        },
        async getMusicList() {
            await this.axios.get("/personalized/newsong").then((res) => {
                this.musiclist = res.result;
            });
        },
        async getsingerlist() {
            await this.axios.get("/top/artists").then((res) => {
                this.singlist = res.artists.splice(0, 9);
            });
        },
        async gethotmvlist() {
            await this.axios.get("/mv/first?limit=7").then((res) => {
                this.hotmvlist = res.splice(1);
            });
        },
        async getBanners() {
            await this.axios.get("/banner").then((re) => {
                this.banner = re.banners;
            });
        },
    },
    components: {
        TitleBorder,
        ImgItem,
        MusicList,
        Swiper,
        SwiperSlide,
    },
};
</script>

<style lang="scss" scoped>
.content {
    position: relative;
    top: 50px;
    .swiper {
        margin-bottom: 20px;
        .banner-item {
            display: inline-block;
        }
    }
    .recommend {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        li {
            width: 33%;
            margin-bottom: 16px;
            font-size: 13px;
            img {
                width: 100%;
                display: block;
            }
            p {
                font-size: 13px;
                color: #333;
                padding: 6px 2px 0 6px;
            }
        }
    }
    .songer {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        li {
            width: 33%;
            margin-bottom: 16px;
            font-size: 13px;
            img {
                width: 100%;
                display: block;
            }
            .singername {
                font-size: 13px;
                color: #333;
                text-align: center;
                padding: 6px 2px 0 6px;
            }
        }
    }
    .hotmv {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        li {
            width: 48%;
            margin-bottom: 16px;
            font-size: 13px;
            img {
                width: 100%;
                display: block;
            }
            .singername {
                font-size: 13px;
                color: #333;
                text-align: center;
                padding: 6px 2px 0 6px;
            }
        }
    }
}
</style>
